import React, {Component, lazy, Suspense} from 'react';
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'
import MyNavLink from '../../components/MyNavLink'
import './index.css'

import { Spin } from 'antd';

// 路由懒加载
const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

class RouterDemo extends Component {

    render() {
        return (
            <div className={'layout-container'}>
                <BrowserRouter>
                    <header>
                        <h1>鸟啼标题栏</h1>
                    </header>
                    <nav>
                        <ul>
                            {/* 原始写法，直接使用 NavLink */}
                            {/*<li><NavLink activeClassName={'item-active'} to={'/home'}>首页</MyNavLink></li>*/}
                            {/*<li><NavLink activeClassName={'item-active'} to={'/about'}>关于</MyNavLink></li>*/}

                            {/* 自定义MyNavLink，封装className等属性 */}
                            {/*  exact={1} 严格匹配，0模糊匹配 */}
                            <li><MyNavLink to='/home'>首页</MyNavLink></li>
                            <li><MyNavLink to='/about'>关于</MyNavLink></li>
                        </ul>
                    </nav>
                    <div className={'layout-content'}>
                        <Switch>
                            {/* Suspense，加载中显示 */}
                            <Suspense fallback={<Spin/>}>
                                <Route path='/home' component={Home}/>
                                <Route path='/about' component={About}/>
                                <Redirect to='/home'/>
                            </Suspense>
                        </Switch>
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

export default RouterDemo;
